<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  li {
    display: inline;
  }
</style>

<body>
  <div id="contact">
    <div class="div_header">
      <header>
        <div style="display: flex; padding-top: 2%; padding-left: 3%;">
          <div style="flex: 1;">
            <div style="display: flex;">
              <img src="../img/logo3.png" width="150px" alt="">
              <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
            </div>
          </div>
          <div class="div_header_div_ul">
            <div style="width: 80%;margin-top: 1.5%;">
              <ul style="display: flex;">
                <li><a href="./home.html">首页</a></li>
                <li><a href="./Century-old_brand.html">百年品牌</a></li>
                <li><a href="./Brand_strength.html">品牌实力</a></li>
                <li><a href="./cooperation.html">特许合作</a></li>
                <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                <li><a href="./Store_navigation.html">门店导航</a></li>
                <li><a href="./contact.html">联系我们</a></li>
                <li><a href="./message.html">留言</a></li>
                <li id="li_1"><a href="./login.html">登录/注册</a></li>
                <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
              </ul>
            </div>
            <div style="margin-top: 1.5%;">
              <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;" v-model="name">
              <button style="border: 0;padding: 3px 5px;background-color: #fff;" @click="search()">搜索</button>
            </div>
          </div>
        </div>
      </header>
      <section>
        <div style="display: flex;">
          <img class="div_header_img" src="../img/slogan_contact.png" alt="">
          <div class="div_one_div">
            <h5 style="color: #fff;">合作热线</h5>
            <h1 style="color: #d59961;font-weight: 700;">123-123-1234</h1>
            <h6 style="color: #fff;">邮箱：123456789@qq.com</h6>
            <h6 style="color: #fff;">地址：地球村</h6>
            <div>
              <form action="#" method="post">
                <input type="text" placeholder="姓名" v-model="ruleForm.name">
                <input type="text" placeholder="电话" v-model="ruleForm.phone"><br><br>
                <input type="text" placeholder="合作留言" v-model="ruleForm.message"
                  style="width: 605px; height: 80px;"><br>
                <input class="div_div_form_btn" type="button" value="提交" @click="queryContact()">
              </form>
            </div>
          </div>
        </div>
      </section>
      <footer style="background-color: #000; padding: 3% 15%;margin-top: 3%;">
        <div style="display: flex;">
          <div style="display: flex; width: 80%; flex-wrap: wrap;">
            <h6 class="footer_h6">首页</h6>
            <h6 class="footer_h6">百年品牌</h6>
            <h6 class="footer_h6">品牌实力</h6>
            <h6 class="footer_h6">特许合作</h6>
            <h6 class="footer_h6">传奇菜品</h6>
            <h6 class="footer_h6">门店导航</h6>
            <h6 class="footer_h6">联系我们</h6>
            <div style="width: 100%;padding-left: 3%;">
              <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
              <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
              <span class="footer_span">风险提示：投资有风险，请理性选择</span>
            </div>
          </div>
          <div>
            <img src="../img/erweima.jpg" width="150px" alt="">
          </div>
        </div>
      </footer>
    </div>
  </div>

</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  new Vue({
    el: '#contact',
    data() {
      return {
        ruleForm: {},
        name: ''
      }
    },
    methods: {
      // 提交
      async queryContact() {
        if (this.ruleForm.name == "" || this.ruleForm.message == "") {
          this.$message.info("请先填写好数据在进行提交");
          return;
        }
        const { data: result } = await this.$http.post("http://localhost:9092/hot_contact/insert", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.ruleForm = {};
      },
      // 搜索
      search() {
        localStorage.setItem("name", this.name);
        window.location.href = './Legendary_dishes.html';
      }
    }
  })
</script>

</html>